<template>
  <div class="comp-order-tracks" v-loading.fullscreen="loading">
    <template v-if="rep">
      <div class="track" v-for="track in rep.tracks" :key="track.id" :class="{ finished: track.finished === 'yes' }">
        <div class="line"></div>
        <div class="icon"></div>
        <div class="handler">
          <div class="name">
            <span>{{ track.handler.name }}</span>
            <span style="margin: 0 2px">-</span>
            <span v-if="track.handler.depments.length > 0 && track.handler.depments[0].dept.id === track.dept.id">{{
                track.handler.depments[0].duty
              }}</span>
          </div>
        </div>
        <div class="content">
          <div class="value">{{ track.dept.name }}</div>
        </div>
        <div class="content" v-if="track.finished === 'yes'">
          <div class="name" v-if="!track.isAdmin">
            <span v-if="track.handling === 'return'">未</span>
            <span>{{ track.typeText }}</span>
            <span style="margin-left: 2px" v-if="track.handling !== 'yes'">({{ track.handlingText }})</span>
            <span style="margin: 0 4px">·</span>
          </div>
          <div class="value" v-if="!track.isAdmin">{{ track.finishedAt }}</div>
        </div>
        <div class="content" v-else>
          <div class="name" v-if="track.type === 'relay'">
            <span>{{ track.typeText }}</span>
            <span>中</span>
            <span style="margin: 0 4px">·</span>
          </div>
          <div class="name" v-else>
            <span>待</span>
            <span>{{ track.typeText }}</span>
            <span style="margin: 0 4px">·</span>
          </div>
          <div class="value">
            <!-- {{track}} -->
            <span v-if="track.countdownAt">剩余{{ track.countdownAt }}</span>
            <span style="color: #f22200" v-else>已超时<button style="padding:5px;margin-left:5px"
                                                              @click="cb(track)">催办</button></span>
          </div>
        </div>
        <div class="signs" v-if="track.type === 'relay' && track.signs.length > 0">
          <div class="sign" :key="sign.id" v-for="sign in track.signs">
            <div class="row" v-if="sign.isAdmin !== '1'">
              <div class="name">转派给：</div>
              <div class="value">
                <span>{{ sign.dept.name }}</span>
                <span style="margin: 0 2px">-</span>
                <span>{{ sign.handler.name }}</span>
              </div>
            </div>
            <div class="row" v-if="sign.isAdmin !== '1'">
              <div class="name">转派时间：</div>
              <div class="value">{{ sign.createdAt }}</div>
            </div>
            <div class="row" v-if="sign.isAdmin !== '1'">

              <div class="name">转派意见：</div>
              <div class="value">{{ sign.content }} <span class="button button--edit"
                                                          style="color:#1677FF; cursor: pointer;"
                                                          @click="setreply(sign,act=0,type=1)">编辑</span></div>
            </div>
            <div class="row" v-if="sign.files.length > 0">
              <div class="name">转派附件：</div>
              <div class="value">
                <comp-files-viewer :files="sign.files"></comp-files-viewer>
              </div>
            </div>
            <div class="row" v-if="sign.isAdmin !== '1'">
              <div class="name">答复状态：</div>
              <div class="value">{{ sign.typeText }}</div>
            </div>
            <div class="row" v-if="sign.finished === 'not' && sign.isAdmin !== '1' && sign.isAdmin !== '1'">
              <div class="name">答复耗时：</div>
              <div class="value">{{ sign.duration }} <span style="color: #f22200" v-if="sign.stime>'259200000'">  &nbsp;&nbsp;超时答复</span>
              </div>
            </div>
            <div class="row" v-if="sign.finished === 'yes' && sign.type === 'reply' && sign.isAdmin !== '1'">
              <div class="name">答复时间：</div>
              <div class="value">{{ sign.finishedAt }}</div>
            </div>
            <div class="row" v-if="sign.finished === 'yes' && sign.type === 'reply' && sign.isAdmin !== '1'">
              <div class="name">答复耗时：</div>
              <div class="value">{{ sign.duration }} <span style="color: #f22200" v-if="sign.stime>'259200000'">  &nbsp;&nbsp;超时答复</span>
              </div>
            </div>
            <div class="row" v-if="sign.finished === 'yes' && sign.type === 'reply'">
              <div class="name">答复意见：</div>
              <div class="value">{{ sign.replyContent }}<span class="button button--edit"
                                                              style="color:#1677FF; cursor: pointer;"
                                                              @click="setreply(sign,act=1,type=2)">编辑</span></div>

            </div>
            <div class="row" v-if="sign.finished === 'yes' && sign.type === 'return'">
              <div class="name">退回时间：</div>
              <div class="value">{{ sign.finishedAt }}</div>
            </div>
            <div class="row" v-if="sign.finished === 'yes' && sign.type === 'return'">
              <div class="name">退回意见：</div>
              <div class="value">{{ sign.replyContent }} <span class="button button--edit"
                                                               style="color:#1677FF; cursor: pointer;"
                                                               @click="setreply(sign,act=2,type=0)">编辑</span></div>
            </div>
            <div class="row" v-if="sign.finished === 'yes' && sign.type === 'revoke'">
              <div class="name">撤回时间：</div>
              <div class="value">{{ sign.finishedAt }}</div>
            </div>
            <div class="row"
                 v-if="sign.finished === 'yes' && (sign.type === 'reply' || sign.type === 'return') && sign.replyFiles.length > 0">
              <div class="name">
                <span v-if="sign.type === 'reply'">答复</span>
                <span v-else-if="sign.type === 'return'">退回</span>
                <span>附件：</span>
              </div>
              <div class="value">
                <comp-files-viewer :files="sign.replyFiles"></comp-files-viewer>
              </div>
            </div>
            <div class="row" v-if="sign.isAdmin !== '1' && managerQuNums.includes(profile.number)">
              <el-button size="mini" style="color:#1677FF; cursor: pointer;" @click="handleDeleteCountersign(sign)">删除转派</el-button>
            </div>
          </div>
        </div>
        <div class="content" v-if="track.finished === 'yes' && track.type !== 'relay'">
          <div class="name">
            <span v-if="track.handling === 'yes' || track.handling === 'revoke'">{{ track.typeText }}</span>
            <span v-else-if="track.handling === 'return'">退回</span>
            <span>意见：</span>
          </div>
          <div class="value">{{ track.content }}<span class="button button--edit"
                                                      style="color:#1677FF; cursor: pointer;"
                                                      @click="setreply(track,act=3,type=0)">编辑</span></div>
        </div>
        <div class="content" v-if="track.finished === 'yes' && track.type !== 'relay' && track.files.length > 0">
          <div class="name">
            <span v-if="track.handling === 'yes' || track.handling === 'revoke'">{{ track.typeText }}</span>
            <span v-else-if="track.handling === 'return'">退回</span>
            <span>附件：</span>
          </div>
          <div class="value">
            <comp-files-viewer :files="track.files"></comp-files-viewer>
          </div>
        </div>
        <template v-if="track.finished === 'yes' && track.copytos.length > 0">
          <div class="content" v-for="copyto in track.copytos" :key="copyto.id">
            <div class="name">抄送给：</div>
            <div class="value">{{ copyto.name }}</div>
          </div>
        </template>
      </div>
      <div class="track finished last">
        <div class="line"></div>
        <div class="icon"></div>
        <div class="handler">
          <div class="name">
            <span>{{ order.creator.name }}</span>
            <span style="margin: 0 2px" v-if="order.userIdDeptRelList">-</span>
            <span v-if="order.userIdDeptRelList">{{ theSum }}</span>
          </div>
        </div>
        <div class="content" v-if="order.userIdDeptRelList">
          <div class="value">{{ theSam }}</div>
        </div>
        <div class="content" v-else-if="order.creator.role === 'holder'">
          <div class="value">{{ theSam }}</div>
        </div>
        <div class="content">
          <div class="name">
            <span>提交</span>
            <span style="margin: 0 4px">·</span>
          </div>
          <div class="value">{{ order.createdAt }}</div>
        </div>
      </div>
    </template>
    <el-dialog
      title="编辑答复"
      :visible.sync="centerDialogVisible"
    >
      <el-form :model="form">
        <el-form-item label="意见：">
          <el-input type="textarea" v-model="form.content" style="width: 600px" placeholder="请输入" :maxlength="1000"
                    :rows="10" resize="none" :readonly="loading"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
                <el-button @click="centerDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitreply">确 定</el-button>
            </span>
    </el-dialog>

  </div>

</template>

<script>
import mixin from "../mixin";
import {string, int} from "../util";
import compdialog from "../comps/dialog.vue";

export default {
  name: "comp-order-tracks",
  mixins: [mixin],
  props: {
    order: {type: Object, default: null},
    changeOrder:{type:Boolean,default:false}
  },
  emits: ['deleteCountersign'],
  data: () => ({
    loading: false,
    replyidea: null,
    centerDialogVisible: false,
    form: {
      content: "",
      type: null,
      id: null,
    },
    rep: null,
    managerQuNums: managerQuNums
  }),
  components: {
    compdialog
  },
  computed: {

    theSum() {
      // 计算数值的总和
      var bumen = ""
      if (this.order.userIdDeptRelList) {
        this.order.userIdDeptRelList.forEach(e => {
          bumen += e.deptDuty + "、"
        });
        return bumen.slice(0, -1)
      } else {

        return ""
      }


    },
    theSam() {
      var zhiwu = ""
      if (this.order.userIdDeptRelList) {
        this.order.userIdDeptRelList.forEach(e => {
          zhiwu += e.deptIdDepartment.deptName + "、"
        });
        return zhiwu.slice(0, -1)
      } else {

        return ""
      }
    }
  },
  watch:{
    changeOrder:function (){
      this.rep = this.order
      this.clock();
    }
  },
  methods: {
    async cb(track) {
      console.log(track);
      var zId = "";
      var type = "";

      if (track.signs && track.signs.length > 0) {
        if (track.signs[0].type > 0) {

        } else {
          zId = track.signs[0].id;
          type = "1";
          console.log(zId);
        }
      } else {
        zId = track.id;
        type = "0";
      }
      var data = {
        zId: zId,
        type: type
      }
      // console.log(data);
      // return
      let res = await this.plugins.user.getCbone(data);
      if (res.code == 0) {
        this.plugins.modal.alert("", "催办成功", "success");

      } else {
        this.plugins.modal.alert("页面加载失败", res.code + "：" + res.msg, "error");

      }
    },
    setreply(param, act, type) {
      this.centerDialogVisible = true;
      // console.log(param);
      // this.form.content = param.content || param.replyContent

      if (act == 0) {
        this.form.content = param.content
      } else if (act == 1) {
        this.form.content = param.replyContent

      } else if (act == 2) {
        this.form.content = param.replyContent

      } else if (act == 3) {
        this.form.content = param.content

      }
      this.form.type = type;
      this.form.id = param.id;
      // console.log(type);
      // console.log(this.form.content);
    },
    submitreply() {
      console.log(this.form);
      this.plugins.user.updateReply(this.form).then((res) => {
        this.loading = false;
        if (res.code === 0) {
          this.plugins.modal.toast("保存成功！", "success");
          this.centerDialogVisible = false;
          let query = this.$route.query;
          this.plugins.user.getOrder(query.orderId).then(res => {
            this.rep = res.data
          });
        } else {
          this.plugins.modal.alert("保存失败", res.code + "：" + res.msg, "error");
        }
      });

    },
    clock() {
      this.timer = clearTimeout(this.timer) || setTimeout(() => this.clock(), 1000);
      // console.log(this.order.tracks);
      this.rep && this.rep.tracks.forEach((track) => {
        let value = Math.ceil(Math.max(track.countdown - Date.now(), 0) / 1000);
        let days = Math.floor(value / 86400);
        let hours = Math.floor(value % 86400 / 3600);
        let minutes = Math.floor(value % 3600 / 60);
        let seconds = Math.floor(value % 60);
        let text = days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
        if (value > 0 && track.finished === "not") track.countdownAt = text.replace("0天0小时0分钟", "").replace("0天0小时", "").replace("0天", "");
        else track.countdownAt = "";
      });
    },
    handleDeleteCountersign(e) {
      this.$emit('deleteCountersign',e)
    }
  },
  mounted() {
    this.rep = this.order
    this.clock();

  },
  beforeDestroy() {
    this.timer && clearTimeout(this.timer);
  },
};
</script>

<style lang="scss">
.button {
  display: inline-block;
  margin-right: 1em;
  padding: 3px;
  height: 14px;
  color: #1677ff;
  line-height: 1;
  text-decoration: none;
  vertical-align: top;
  user-select: none;
  cursor: pointer;
}

.button--edit {
  padding-left: 22px;
  background: url() no-repeat 3px 2px/16px 16px;
}

.comp-order-tracks {
  overflow: hidden;

  & > .track {
    margin-right: 12px;
    padding: 0 0 18px 32px;

    & > .line {
      position: absolute;
      top: 20px;
      left: 9.5px;
      width: 1px;
      height: calc(100% - 20px);
      background-color: #eee;
    }

    & > .icon {
      position: absolute;
      top: 0;
      left: 0;
      width: 20px;
      height: 20px;
      background: url(../assets/icon70.png) no-repeat center center/contain;
    }

    & > .handler {
      display: flex;
      align-items: flex-start;

      & > .name {
        flex: 1 1 0;
        min-height: 20px;
        color: #333;
        font-size: 16px;
        line-height: 20px;
      }
    }

    & > .content {
      display: flex;
      align-items: flex-start;
      margin-top: 6px;

      & > .name {
        flex: 0 0 auto;
        height: 18px;
        color: #999;
        font-size: 14px;
        line-height: 18px;
      }

      & > .value {
        flex: 0 1 auto;
        min-height: 18px;
        color: #999;
        font-size: 14px;
        line-height: 18px;
        white-space: pre-wrap;
        overflow: hidden;
      }
    }

    & > .signs {
      overflow: hidden;

      & > .sign {
        margin-top: 6px;
        margin-right: 6px;
        border-top: solid 1px #eee;
        padding-top: 6px;

        & > .row {
          display: flex;
          align-items: flex-start;
          margin-top: 6px;

          & > .name {
            flex: 0 0 auto;
            height: 18px;
            color: #999;
            font-size: 14px;
            line-height: 18px;
          }

          & > .value {
            flex: 0 1 auto;
            min-height: 18px;
            color: #999;
            font-size: 14px;
            line-height: 18px;
            overflow: hidden;

            & > .file {
              display: flex;
              align-items: flex-start;
              margin-top: 4px;

              & > .index {
                flex: 0 0 auto;
                margin-right: 4px;
                height: 18px;
                color: #1677ff;
                font-size: 14px;
                line-height: 18px;
              }

              & > .name {
                flex: 0 1 auto;
                min-height: 18px;
                color: #1677ff;
                font-size: 14px;
                line-height: 18px;
                word-break: break-all;
              }

              &:first-child {
                margin-top: 0;
              }
            }
          }

          &:first-child {
            margin-top: 0;
          }
        }
      }
    }

    &.finished {
      & > .line {
        background-color: #1677ff;
      }

      & > .icon {
        background-image: url(../assets/icon71.png);
      }

      & > .handler {
        color: #1677ff;
      }
    }

    &.last {
      padding-bottom: 0;

      & > .line {
        display: none;
      }
    }
  }
}
</style>
